<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/index.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            margin: 50px auto 0;
            display: block;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400">
        此浏览器不支持webgl
    </canvas>
</body>
</html>

<script>
    const ctx = document.getElementById('canvas')
    const gl = ctx.getContext('webgl')

    //着色器
    //创建着色器源码
    //顶点着色器
    const VERTEX_SHADER_SOURCE = `
        attribute vec4 aPosition;
        attribute float aPointSize;
        void main(){
            gl_Position = aPosition;
            gl_PointSize = aPointSize;
        }
    `
    //片元着色器
    const FRAGMENT_SHADER_SOURCE = `
        void main(){
            //gl_FragColor vec4(1.0, 0.0, 0.0, 1.0) vec4(r, g, b, a)
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
    `

    const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)
    const aPosition = gl.getAttribLocation(program, 'aPosition')
    const aPointSize = gl.getAttribLocation(program, 'aPointSize')

    const points = new Float32Array([
        -0.5, -0.5, 10.0,
        0.5, -0.5, 20.0,
        0.0, 0.5, 30.0
    ])
    //创建缓冲区对象
    const buffer = gl.createBuffer()
    //将缓冲区对象绑定到webgl上
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
    //将顶点数据写入到缓冲区对象中
    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW)

    const BYTES = points.BYTES_PER_ELEMENT

    //给定点着色器中的attribute变量赋值
    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, BYTES * 3, 0)
    //激活变量
    gl.enableVertexAttribArray(aPosition)

    //给定点着色器中的attribute变量赋值
    gl.vertexAttribPointer(aPointSize, 1, gl.FLOAT, false, BYTES * 3, BYTES * 2)
    //激活变量
    gl.enableVertexAttribArray(aPointSize)

    // gl.vertexAttrib2f(aPosition, 0.0, 0.0);
        //执行绘制
    gl.drawArrays(gl.POINTS, 0, 3)
</script>